<template>
    <!--Modal选择岗位组件-->
    <a-modal
        title="选择岗位"
        width="660px"
        :visible="visible"
        destroyOnClose
        @ok="handleOk"
        @cancel="handleCancel"
    >
        <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
            style="padding-right: 60px"
        >
            <a-row :gutter="24">
                <a-col :md="24" :sm="24">
                    <a-form-model-item label="组织" prop="orgSelectedName" class="requiredFormItem">
                        <TreeSelectOrganization
                            v-model="form.orgSelectedName"
                            :orgSelectedValue.sync="form.orgSelectedName"
                            :orgSelectedLabel.sync="form.orgSelectedLabel"
                            :childrenNode="childrenNode"
                            :containVirtual="true"
                            :orgQuery="{
                                notContainTags: ['EXTEND'],
                            }"
                        ></TreeSelectOrganization>
                    </a-form-model-item>
                </a-col>
                <a-col :md="24" :sm="24">
                    <a-form-model-item label="岗位" prop="jobsSelectedName" class="requiredFormItem">
                        <Jobs
                            v-model="form.jobsSelectedName"
                            :selectedValue.sync="form.jobsSelectedName"
                            :selectedLabel.sync="form.selectedLabel"
                            :addTitel="form.orgSelectedLabel[0]"
                        ></Jobs>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </a-modal>
</template>

<script>
// import { bindUserOrg } from '@/api/system/system'
import TreeSelectOrganization from '@/components/TreeSelectOrganization'
import Jobs from '@/components/TreeSelectOrganization/jobs'
export default {
    name: 'modalBindOrg',
    components: {
        TreeSelectOrganization,
        Jobs,
    },
    props: {
        visible: {
            value: false,
            type: Boolean,
        },
        id: {
            type: String,
            default: '',
        },
        formObj: {
            type: Object,
            default: () => {},
        },
    },

    data() {
        return {
            rules: {
                orgSelectedName: [{ required: true, message: '请选择组织', trigger: 'change' }],
                jobsSelectedName: [{ required: true, message: '请选择岗位', trigger: 'change' }],
            },
            treeCheckable: true,
            confirmLoading: false,
            childrenNode: 'jobs',
            form: {
                orgSelectedName: [],
                orgSelectedLabel: [],
                selectedLabel:undefined,
                jobsSelectedName: undefined,
            },
        }
    },
    created() {},
    methods: {
        /**
         *@desc  table岗位选择
         *@param {}
         */
        handleOk(e) {
            const _this = this

            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params ={
                        jobId:_this.form.jobsSelectedName,
                        label:_this.form.selectedLabel,
                    }
                    this.$emit('handleOk', params)
                    this.form = { ...this.$options.data().form }
                } else {
                  this.$message.warning("请填写完所有必填项信息")
                }
            })
        },
        /**
         *@desc  table列表密码重置取消
         *@param {}
         */
        handleCancel(e) {
            this.$emit('handleCancel', false)
            this.form = { ...this.$options.data().form }
        },
    },
}
</script>

<style>
</style>
